<template>
  <div class="ans-result">
    <Title title="数据统计" />
    <ul class="list" v-if="data.length">
      <li class="item fx" v-for="(item, i) in data" :key="i">
        <div class="left">
          <PreViewSubject :data="item.options" :name="item.name" :i="i" />
        </div>
        <div class="right">
          <ECycleOption
            :o="{
              name: item.name,
              a: item.A,
              b: item.B,
              c: item.C,
              d: item.D,
            }"
          />
        </div>
        <div class="midd">
          <ECycle
            :o="{
              name: item.name,
              errCount: item.errCount,
              corrCount: item.corrCount,
            }"
          />
        </div>
      </li>
    </ul>
    <el-empty class='bw' v-else description='还没有数据哦, 快去做题吧'></el-empty>
  </div>
</template>

<script>
import ECycle from "@/components/echart/Cycle";
import ECycleOption from "@/components/echart/CycleOption";
import PreViewSubject from "@/components/preview/PreviewSingleSubject";
import { getSubjectRecord } from "@/api/paper";
import { formatSubjectRecord } from "@/utils";
import Title from '@/components/common/Title'
export default {
  name: "AnswerResult",
  components: {
    ECycle,
    PreViewSubject,
    ECycleOption,
    Title
  },
  data() {
    return {
      data: [],
    };
  },
  async created() {
    const res = await getSubjectRecord();
    if (res.code === 1) {
      if (res.data[0].result) {
        const data = formatSubjectRecord(res.data[0].result);
        this.data = data;
      }
    }
  },
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.item {
  justify-content: space-between;
  margin-bottom: 40px;
}

.right {
  width: 400px;
}

.midd {
  width: 400px;
}
</style>

